<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣电影</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/pc-movie-douban.css">
    <style>
        @media screen and (max-width:1024px) {
            body{
                width: 1024px;
            }
            .nav{min-width: 1024px;}
            .nav .nav_wrap .nav_primary, .nav .nav_secondary{width: 1000px;}
            #wrapper{width: 1000px;}
            #wrapper .content .article{
                padding-right: 25px;
            }
        }
        html,body{
            font-size: 13px;
        }
        body,td,th{
            font: 12px Helvetica,Arial,sans-serif;
            line-height: 1.62;
        }
        html{color: #111;background-color: #fff;}
        body{margin: 0;padding: 0;}
    </style>
</head>
<body>
    <div id="db_global_nav" class="global_nav">
        <div class="bd">
            <div class="top_nav_info">
                <ul>
                    <!-- 下载豆瓣客户端 -->
                    <li class="top_nav_doubanapp">
                        <a href="#" class="link_doubanapp">下载豆瓣客户端</a>
                        <!-- 点击显示更多 -->
                        <div id="top_nav_appintro" class="more_items">
                            <p class="appintro_title">豆瓣</p>
                            <p class="appintro_qrcode">扫码直接下载</p>
                            <div class="download">
                                <a href="#" class="download_iPhone">iPhone</a>
                                <span>·</span>
                                <a href="#" class="download_android">Android</a>
                            </div>
                        </div>
                    </li>
                    <!-- 提醒 -->
                    <li class="top_nav_reminder">
                        <a href="#" class="link_remind">提醒</a>
                        <!-- 点击显示更多 -->
                        <div id="top_nav_notimenu" class="more_items">
                            <div class="bd">
                                <p class="no_new_notis">最近没有收到新消息...</p>
                            </div>
                            <div class="ft">
                                <a href="#">查看全部提醒</a>
                            </div>
                        </div>
                    </li>
                    <!-- 豆邮 -->
                    <li class="top_nav_doumail">
                        <a href="#" id="top_nav_doumail_link">豆邮</a>
                    </li>
                    <!-- 用户 -->
                    <li class="nav_user_account">
                        <a href="#" class="bn_more">
                            <span>lena的账号</span>
                            <span class="arrow"></span>
                        </a>
                        <!-- 点击显示更多 -->
                        <div id="top_nav_account" class="more_items">
                            <ul>
                                <li><a href="#">个人主页</a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">我的钱包</a></li>
                                <li><a href="#">账号管理</a></li>
                                <li><a href="#">退出</a></li>
                            </ul>
                        </div>
                    </li>
                    
                </ul>
            </div>
            <!-- 左侧 -->
            <div class="global_nav_item">
                <ul>
                    <li><a href="#">豆瓣</a></li>
                    <li><a href="#">读书</a></li>
                    <li><a href="#">电影</a></li>
                    <li><a href="#">音乐</a></li>
                    <li><a href="#">同城</a></li>
                    <li><a href="#">小组</a></li>
                    <li><a href="#">阅读</a></li>
                    <li><a href="#">FM</a></li>
                    <li><a href="#">时间</a></li>
                    <li><a href="#">豆品</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="db_nav_movie" class="nav">
        <div class="nav_wrap">
            <div class="nav_primary">
                <div class="nav_logo">
                    <a href="#">豆瓣电影</a>
                </div>
                <div class="nav_search">
                    <div class="inp">
                        <input type="text" id="inp_query" name="search_text" size="22" maxlength="60" placeholder="搜索电影、电视剧、综艺、影人">
                    </div>
                    <div class="inp_btn">
                        <input type="submit" value="搜索">
                    </div>
                </div>
            </div>
        </div>
        <div class="nav_secondary">
            <div class="nav_items">
                <ul>
                    <li><a href="#">我看</a></li>
                    <li><a href="#">影讯&购票</a></li>
                    <li><a href="#">选电影</a></li>
                    <li><a href="#">电视剧</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">影评</a></li>
                    <li><a href="#">2021年度榜单</a></li>
                    <li><a href="#">2021书影音报告</a></li>
                </ul>
            </div>
            <a href="#" class="movieannual"></a>
        </div>
    </div>
    <div id="wrapper">
        <div class="content">
            <div class="grid-16-8">
                <div class="article">
                    <!-- 正在热映 -->
                    <div id="screening" class="screening">
                        <div class="hd">
                            <div class="slide_control">
                                <a href="#" class="btn_prev"></a>
                                <a href="#" class="btn_next"></a>
                            </div>
                            <div class="slide_tip swiper-pagination"></div>
                            <h2>
                                正在热映
                                <span><a href="#">全部正在热映»</a></span>
                                <span><a href="#">即将上映»</a></span>
                            </h2>
                        </div>
                        <div class="screening_bd">
                            <div class="swiper screeningSwiper ul_slide_content">
                                <div class="swiper-wrapper"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 最近热门电影 -->
                    <div class="gaia gaia_movie">
                        <h2>
                            <div class="hd">最近热门电影</div>
                            <div class="filter">
                                <label class="activate">热门</label>
                                <label>最新</label>
                                <label>豆瓣高分</label>
                                <label>冷门佳片</label>
                                <label>华语</label>
                                <label>欧美</label>
                                <label>韩国</label>
                                <label>日本</label>
                                <label>豆瓣猜</label>
                            </div>
                            <span class="more"><a href="#">更多»</a></span>
                        </h2>
                        <div class="list_wrapper"></div>
                    </div>
                    <!-- 最近热门电视剧 -->
                    <div class="gaia gaia_tv">
                        <h2>
                            <div class="hd">最近热门电视剧</div>
                            <div class="filter">
                                <label class="activate">热门</label>
                                <label>国产剧</label>
                                <label>综艺</label>
                                <label>美剧</label>
                                <label>日剧</label>
                                <label>韩剧</label>
                                <label>日本动画</label>
                                <label>纪录片</label>
                            </div>
                            <span class="more"><a href="#">更多»</a></span>
                        </h2>
                        <div class="list_wrapper"></div>
                    </div>
                    <!-- 热门推荐 -->
                    <div class="gallery_frames">
                        <div class="hd">
                            <div class="slide_control">
                                <a href="#" class="btn_prev"></a>
                                <a href="#" class="btn_next"></a>
                            </div>
                            <div class="slide_tip">
                                <span class="slide_index">1</span>
                                / 
                                <span class="slide_max">8</span>
                            </div>
                            <h2>热门推荐</h2>
                        </div>

                    </div>
                    <!-- 最受欢迎的影评 -->
                    <div class="reviews">
                        <div class="hd">
                            <h2>
                                最受欢迎的影评
                                <span><a href="#">更多热门影评»</a></span>
                                <span><a href="#">新片影评»</a></span>
                            </h2>
                        </div>
                    </div>
                </div>
                <!-- 右侧 -->
                <div class="aside">
                    <div class="rating_answer">
                        <a href="#">豆瓣电影评分八问</a>
                    </div>
                    <div class="ad">
                        <div class="adsbygoogle"></div>
                        <div class="tag">由谷歌提供的广告</div>
                    </div>
                    <div class="billboard">
                        <div class="billboard_hd">
                            <h2>
                                一周口碑榜
                                <span><a href="#">更多榜单»</a></span>
                            </h2>
                        </div>
                        <div class="billboard_bd">
                            <ul>
                                <li>
                                    <span class="order">1</span>
                                    <span class="title"><a href="#">咒术回战0 剧场版</a></span>
                                </li>
                                <li>
                                    <span class="order">2</span>
                                    <span class="title"><a href="#">穿着鞋子的贝壳马塞尔</a></span>
                                </li>
                                <li>
                                    <span class="order">3</span>
                                    <span class="title"><a href="#">沼泽深处的女孩</a></span>
                                </li>
                                <li>
                                    <span class="order">4</span>
                                    <span class="title"><a href="#">致敬</a></span>
                                </li>
                                <li>
                                    <span class="order">5</span>
                                    <span class="title"><a href="#">还是觉得你最好</a></span>
                                </li>
                                <li>
                                    <span class="order">6</span>
                                    <span class="title"><a href="#">妈妈！</a></span>
                                </li>
                                <li>
                                    <span class="order">7</span>
                                    <span class="title"><a href="#">安静的女孩</a></span>
                                </li>
                                <li>
                                    <span class="order">8</span>
                                    <span class="title"><a href="#">乌斯特雷姆</a></span>
                                </li>
                                <li>
                                    <span class="order">9</span>
                                    <span class="title"><a href="#">阿尔卡拉斯</a></span>
                                </li>
                                <li>
                                    <span class="order">10</span>
                                    <span class="title"><a href="#">仇念</a></span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="doulist">
                        <h2>热门片单</h2>
                        <ul>
                            <li>
                                <span>278推荐</span>
                                <div class="title">
                                    <a href="#">没有最低分，只有更低分</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="contact_cooperation">
                        <h2>合作联系</h2>
                        <div class="contact_cooperation_bd">
                            <ul>
                                <li>电影合作邮箱：<img src="./img/email_movie.png"></li>
                                <li>电视剧合作邮箱：<img src="./img/email_tv.png"><img src="./img/ic_new.png" class="new"></li>
                            </ul>
                        </div>
                    </div>
                    <br>
                    <div class="contact">
                        <h2>关注我们</h2>
                        <ul class="embassy_list">
                            <li>
                                <a href="#" class="embassy_img"><img src="./img/weibo.png" alt=""></a>
                                <a href="#" class="primary_link">微博</a>
                            </li>
                            <li>
                                <a href="#" class="embassy_img"><img src="./img/weixin.png" alt=""></a>
                                <a href="#" class="primary_link">微博</a>
                            </li>
                            <li>
                                <a href="#" class="embassy_img"><img src="./img/banzui.png" alt=""></a>
                                <a href="#" class="primary_link">微博</a>
                            </li>
                            <li>
                                <a href="#" class="embassy_img"><img src="./img/guangyingclub.png" alt=""></a>
                                <a href="#" class="primary_link">微博</a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="ad2">
                        <div class="adsbygoogle">
                            <a href="#" class="pic"><img src="./img/ad2.jpg" alt=""></a>
                            <div class="article_info">
                                <p class="title"><a href="#">人类生活的脆弱性与对正义的寻求</a></p>
                                <p class="author">豆瓣时间</p>
                            </div>
                        </div>
                        <div class="tag">广告</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <span id="icp" class="fleft gray_link">© 2005－2022 douban.com, all rights reserved 北京豆网科技有限公司</span>
            <span class="fright">
                <a href="#">关于豆瓣</a>
                · 
                <a href="#">在豆瓣工作</a>
                · 
                <a href="#">联系我们</a>
                · 
                <a href="#">法律声明</a>
                · 
                <a href="#">帮助中心</a>
                · 
                <a href="#">移动应用</a>
                · 
                <a href="#">豆瓣广告</a>
            </span>
        </div>
    </div>


    <script src="./lib/jquery-3.6.1.min.js"></script>
    <script src="./lib/swiper-bundle.min.js"></script>
    <!-- nav -->
    <script>
        // 下载豆瓣客户端
        $('.top_nav_doubanapp').hover(function(){
            $('.link_doubanapp').css('color','#fff');
            $('#top_nav_appintro').show();
            $(this).siblings().find('a').removeClass('hoverColor');
            $(this).siblings().find('.more_items').removeClass('displayShow');
        },function(){
            $('.link_doubanapp').css('color','');
            $('#top_nav_appintro').hide();
        })

        // 提醒
        $('.top_nav_reminder').on('click',function(){
            $('.link_remind').toggleClass('hoverColor');
            $('#top_nav_notimenu').toggleClass('displayShow');
            console.log($(this).siblings().find('.more_items'));
            $(this).siblings().find('a').removeClass('hoverColor'); 
            $(this).siblings().find('.more_items').removeClass('displayShow');
        })

        // 用户
        $('.nav_user_account').on('click',function(){
            $('.bn_more').toggleClass('hoverColor');
            $('#top_nav_account').toggleClass('displayShow');
            $(this).siblings().find('a').removeClass('hoverColor'); 
            $(this).siblings().find('.more_items').removeClass('displayShow'); 
        })
    </script>

    <!-- 正在热映 -->
    <script>
        function swiperFunc(){
            var swiper = new Swiper(".screeningSwiper", {
                spaceBetween: 0,
                speed:1500,
                loop: true,
                pagination: {
                    el: ".swiper-pagination",
                    type: "fraction",
                },
                navigation: {
                    nextEl: ".btn_next",
                    prevEl: ".btn_prev",
                },
            });
            $('.slide_tip').removeClass('swiper-pagination').removeClass('swiper-pagination-fraction');
            console.log($('.swiper-slide .ul_slide_item:last-child'));
            $('.swiper-slide .ul_slide_item:last-child').css('margin-right','0');
        }
        swiperFunc();

        $(function(){
            $.ajax({
                type:'post',
                url:'/postScreeningList',
                success:function(res){
                    var len = res.length;
                    var slide_max = Math.ceil(res.length / 5);  //页数
                    var count = 0;
                    var ul_slide_item = '';
                            
                    for(var i = 0; i<slide_max; i++){
                        var swiper_slide = '<div class="swiper-slide">';
                        for(var j = 0; j<5 && count<res.length; j++){
                            ul_slide_item = `<div class="ul_slide_item">
                                                <div class="poster">
                                                    <a href="#"><img src="${res[count].imgURL}" alt=""></a>
                                                </div>
                                                <div class="title">
                                                    <a href="#">${res[count].name}</a>
                                                </div>
                                                <div class="rating">
                                                    <span class="rating_star"></span>
                                                    <span class="subject_rate">${res[count].rating}</span>
                                                </div>
                                                <div class="ticket_btn">
                                                    <span><a href="#">选座购票</a></span>
                                                </div>
                                            </div>`;
                            swiper_slide += ul_slide_item;
                            count++;
                        }
                        swiper_slide += '</div>';   
                        $('.screening_bd .swiper-wrapper').append(swiper_slide);
                    }


                    swiperFunc();
                },
                error:function(err){
                    console.log('err',err);
                }
            })
        })
    </script>
</body>
</html>